//
// Social Branding
// @todo - expand to other social brands
// -------------------------------------------
.social-media-branding {
  a.social-link {
    display: inline-block;
    margin-right: 5px;
    @include transition(all 0.2s ease-in);
  }
  .fa {
    font-size: 36px;
  }
  
  &.social-media-branding-sm {
    a.social-link {
      margin-right: 2px;
    }
    .fa {
      font-size: 26px;
    }    
  }
  &.social-media-branding-xs {
    a.social-link {
      margin-right: 0;
    }
    .fa {
      font-size: 20px;
    }    
  }  
}
.branding-twitter {
  color: #464646; //$branding_twitter_colour;
  
  &:hover {
    color: $branding_twitter_colour;
  }
}
.branding-facebook {
  color: #464646; //$branding_facebook_colour;
  
  &:hover {
    color: $branding_facebook_colour;
  }  
}
.branding-linkedin {
  color: #464646; //$branding_linkedin_colour;
  
  &:hover {
    color: $branding_linkedin_colour;
  }  
}
.branding-google-plus {
  color: #464646; //$branding_google_colour;
  
  &:hover {
    color: $branding_google_colour;
  }  
}

.btn {
  &.branding-twitter {
    color: white;
    
    &:hover {
      background-color: $branding_twitter_colour;
    }
  }
  &.branding-facebook {
    color: white; //$branding_facebook_colour;
    
    &:hover {
      background-color: $branding_facebook_colour;
    }  
  }
  &.branding-linkedin {
    color: white;
    
    &:hover {
      background-color: $branding_linkedin_colour;
    }  
  }
  &.branding-google-plus {
    color: white;
    
    &:hover {
      background-color: $branding_google_colour;
    }  
  }  
}

// social colours
@each $name, $value in $as-theme-colours-brand-colours {
  // bgs
  .bg-brand-#{$name} {
    background-color: $value !important;
  }
  .bg-hover-brand-#{$name}:hover,
  a.bg-hover-brand-#{$name}:hover,
  a.bg-hover-brand-#{$name}:focus {
    background-color: $value !important;
  }  
  
  // text
  .text-brand-#{$name} {
    color: $value !important;
  }
  .text-hover-brand-#{$name}:hover,
  a.text-hover-brand-#{$name}:hover,
  a.text-hover-brand-#{$name}:focus {
    color: $value !important;
  }
  
  a:hover {
    &.bg-brand-#{$name},
    &.text-brand-#{$name} {
      @include opacity(0.9);
    }
  }
}